<template>
  <div class="inner-hository">
    <!-- <div class="search">
      <el-date-picker
        size="mini"
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      <el-button type="primary" size="mini" @click="search">搜素</el-button>
    </div> -->
    <div class="recoders" ref="recoders">
      <div class="more" :class="moreText ? '': 'nomore'" v-if="showMore" @click="search">{{moreText ? '查看更多':'没有更多'}}</div>
      <div class="message" v-for="(message, i) in recoders" :key="i">
        <history-passage :message="message"></history-passage>
      </div>
    </div>
  </div>
</template>

<script>
import HistoryPassage from "@/components/history-passage";
import { queryMeeting } from "@/api/chat";
import { merge, secondToDate } from "../utils";
import { mapState } from "vuex";
import { deepClone } from "@/utils/common";
export default {
  name: "inner-hository",
  components: {
    HistoryPassage,
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 1000,
      dateRange: [new Date(), new Date()],
      recoders: [],
      total:0, 
      loading: false,
      queryCount: 1,
      showMore: true,
      coverDOM: {},
      stopScorllTop: "",
      initFlag: true,
      moreText:true
    };
  },
  mounted() {
    this.search();
    this.$once("scrolldown", () => {
      this.$nextTick(function () {
        this.coverDOM = this.$refs.recoders;
        this.coverDOM.scrollTop = 100000;
      });
    });
    // this.coverDOM = this.$refs.recoders;
    // this.coverDOM.onscroll = async () => {
    //   if (this.stopScorllTop < this.coverDOM.scrollTop) {
    //     //向下滑动退出
    //     return;
    //   }
    //   if (this.loading) {
    //     return;
    //   }
    //   if (this.coverDOM.scrollTop < 50) {
    //     await this.search();
    //     this.$nextTick(() => {
    //       if (this.coverDOM.scrollHeight > this.coverDOM.clientHeight) {
    //         this.showMore = false;
    //       }
    //       this.stopScorllTop = this.coverDOM.scrollTop
    //     });
    //   }
    // };
  },
  computed: {
    ...mapState(["currentChat"]),
    pickerOptions: () => {
      return {
        disabledDate(time) {
          return time.getTime() > new Date().getTime() + 24 * 60 * 60;
        },
      };
    },
  },
  methods: {
    async search() {
      if (!this.currentChat.memberId) {
        this.$message.warning("当前用户ID为空");
        return;
      }
      if(!this.moreText){
        return 
      }
      this.loading = true;
      // let [start, end] = this.dateRange;
      // start = timeformat(start).replace(/T.*/, "T00:00:00");
      // end = timeformat(end).replace(/T.*/, "T23:59:59");
      const [start, end] = secondToDate(this.queryCount);
      const params = {
        talker: this.currentChat.memberId,
        talkerType: this.currentChat.userType,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        startTime: start,
        endTime: end,
      };
      await queryMeeting(params)
        .then((res) => {
          this.queryCount++;
          const { data } = res;
          if(this.total == data.length){
            this.moreText = false
            return
          }
          this.total = data.length
          const recoders = data.map((item) => {
            const meetingId = Object.keys(item);
            const recoder = item[meetingId];
            return recoder;
          });
          const _recoders = merge(recoders); //相同日期或相同客服进行合并
          _recoders.forEach((item) => {
            //添加标题行
            let waiter = item.find((item) => item.talkerType == "3");
            let customItem = {};
            if (waiter) {
              customItem = deepClone(waiter);
              customItem.title = true;
            } else {
              customItem = { title: true, serverTime: item[0].serverTime };
            }
            item.unshift(customItem);
          });
          let sortRecoders = [];
          _recoders.forEach((item) => {
            if (item.contentType !== "0x58") {
              //过滤掉评价消息
              sortRecoders.unshift(item);
            }
          });
          this.recoders = sortRecoders.reduce((cal, current) => {
            return cal.concat(current);
          }, []);
        })
        .catch(() => {
          this.$message.error(`获取记录异常`);
        })
        .finally(() => {
          this.loading = false;
          this.initFlag = false;
          this.$emit("scrolldown");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.inner-hository {
  height: 100%;
  padding-top: 10px;
  text-align: left;
}
.search {
  height: 40px;
}
.recoders {
  height: calc(100% - 12px);
  background-color: #fff;
  overflow-y: auto;
  .more {
    text-align: center;
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    cursor: pointer;
  }
  .nomore{
    opacity: 0.7;
    cursor: default;
  }
  .message {
    margin-bottom: 12px;
  }
}
</style>